<template>
  <view class="e-register-popup">
    <u-popup :show="showPopup" round="10" closeable @close="handleClosePopup">
      <u-gap height="20"></u-gap>
      <button class="u-reset-button" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
        <u-avatar :src="userInfo.avatar" size="50"></u-avatar>
      </button>
      <u-gap height="15"></u-gap>
      <view class="m-l-30 m-r-30">
        <view class="register-row flex-between u-border-bottom p-b-20">
          <view class="p-b-10 m-r-20">手机号:</view>
          <view class=" flex-between flex-1 ">
            <view>
              <text class="text-999" v-if="userInfo.mobile === ''">请绑定手机号</text>
              <text v-else>{{userInfo.mobile}}</text>
            </view>
            <view v-if="!userInfo.mobile">
              <button class="u-reset-button" style="color: #007aff;" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">授权手机号</button>
            </view>
          </view>
        </view>
        <view class="register-row flex-between m-t-20">
          <view class="m-r-20">昵称:</view>
          <view class="flex-1">
            <input type="nickname" v-model="userInfo.nickname" placeholder="请输入昵称" placeholder-class="placeholder-class" @input="handleChange" />
          </view>
          <view style="opacity: 0">占位</view>
        </view>
        <u-gap height="80"></u-gap>
        <view class="step-btn" :class="{'active-step-btn':monitorInfo}" @click="handleSubmit()">提交</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import {phone} from "@/common/api";

export default {
  name: "e-register-popup",
  data(){
    return {
      showPopup: false,
      userInfo: {
        avatar: this.$image('/images/default-avatar.png'),
        mobile: "",
        nickname: "",
      }
    }
  },
  computed: {
    monitorInfo() {
      return this.userInfo.mobile && this.userInfo.nickname;
    },
  },
  methods: {
    handleShowPopup(){
      this.showPopup = true;
    },
    handleClosePopup(){
      this.showPopup = false;
    },
    handleChooseAvatar(e){
      console.log(e);
    },
    handleChange(e){
      const { value } = e.detail;
      console.log(e);
    },
    async getPhoneNumber(e) {
      uni.showLoading({
        title: '授权中',
        mask: true
      });
      if(e.target.errMsg === 'getPhoneNumber:ok'){
        console.log(e.target.code);
        const res = await this.$api.phone({code:e.target.code});
        console.log(res.data);
        if(res.code == 1){
          this.userinfo.mobile = res.data.mobile;
        }
        uni.hideLoading();
      }else{
        uni.hideLoading();
      }
      console.log(e)
    },
    handleSubmit(){
      console.log('aaaa',)
    }
  }
}
</script>

<style scoped lang="scss">
.e-register-popup{
  .register-row{
    padding: 0 60rpx;
    font-size: 26rpx;
    input{
      color: #333;
    }
    /deep/.placeholder-class{
      color: #999;
      font-size: 26rpx;
    }
  }
  .step-btn{
    width: calc(100% - 48rpx);
    background: rgba(38, 115, 192, 0.7);
    text-align: center;
    color: #fff;
    padding: 22rpx 0;
    border-radius: 60rpx;
    position: fixed;
    bottom: 70rpx;
    left: 50%;
    font-family: 'pingfang-medium';
    transform: translateX(-50%);
  }
  .active-step-btn{
    background: #3184d7 !important;
    color: #fff !important;
  }
}

</style>